/*
 * @Author: YYJ
 * @Date: 2024-05-16 11:55:12
 * @Description: 
 * @FilePath: \lgd-admin\src\pages\study\overview\durationLine.tsx
 */
import React, { useState, useEffect } from 'react';
import { queryDurationList } from '@/services/study/overView';
import { Line } from '@ant-design/charts';

const DurationLine: React.FC = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    queryDurationList().then(res =>{
      setData(res.data)
    })
  }, []);

  const config = {
    description: {
      visible: true,
      text: '将数据按照某一字段进行分组\uFF0C用于比对不同类型数据的趋势\u3002',
    },
    padding: 'auto',
    forceFit: true,
    data,
    xField: 'date',
    yField: 'value',
    xAxis: {
      label: {
        visible: true,
        autoHide: true,
      },
    },
    yAxis: { type: 'number' },
    seriesField: 'type',
    smooth: true,
  };
  return <Line {...config} />;
};
export default DurationLine;